<template>
  <view class="container">
    <view>
      <view class="bgf content f ac xb" v-for="i in list">
        <view class="f ac">
          <image
            class="mr30r"
            :src="i.img"
            style="width: 100rpx; height: 100rpx"
          ></image>
          {{ i.title }}
        </view>
        <view class="a" @click="isSelect(i)">
          <image
            class="sinchoose-on"
            style="width: 100%; height: 100%"
            v-if="i.isSelect"
            src="/static/chooseon.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>

    <view class="continue fs40r fw9 tc" @click="choosePosition">继续</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [

      {
          title: "传统动作",
          img: "../../static/daxiong.jpg",
          isSelect: false,
        },
        {
          title: "变式动作",
          img: "../../static/daxiong.jpg",
          isSelect: false,
        },
        {
          title: "结构动作",
          img: "../../static/daxiong.jpg",
          isSelect: false,
        },
        {
          title: "自定义",
          img: "../../static/daxiong.jpg",
          isSelect: false,
        },
        {
          title: "跳过",
          img: "../../static/daxiong.jpg",
          isSelect: false,
        },

      ],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 初始化当前选中的标签
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.$refs.paging.reload();
  },
  /**
   * 生命周期函数--监听页面的卸载
   */
  onUnload() {
    // 卸载全局事件订阅
    uni.$off("syncRefresh");
  },

  methods: {
    choosePosition(){
      uni.navigateTo({
         url: '/pages/position/index'
      });
    },
    isSelect(i){
      this.list.forEach(item => {
        if (item.title === i.title) {
          item.isSelect =!item.isSelect;
        }else{
          item.isSelect = false;
        }
      });

      console.log(this.list,'this.list');
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #000;
  padding: 30rpx;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
}
.content {
  height: 200rpx;
  padding: 30rpx 50rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
  border-radius: 30rpx;
  background: #1c1c1e;
  color: #fff;
}
.continue {
  box-sizing: border-box;
  background: #30CC9A;
  height: 100rpx;
  line-height: 100rpx;
  position: fixed;
  bottom: 40rpx;
  width: 90%;
  border-radius: 30rpx;
  color: #fff;

}

.a {
  width: 50rpx;
  height: 50rpx;
  margin-right: 16rpx;
  border-radius: 50%;
  background: #ffffff;
  border: 2rpx solid #bfbdbd;
}
</style>
